<template>
	<view class="container" :style="{paddingTop: `${getSystemInfo.navBarHeight}px`, background: info !== null ? 'transparent' : '#fff'}">
		
		<navBar :title="pageSource && pageSource === 'video' ? '视频详情' : '卡友圈详情'" marginLeft="32%" />
		
		<view class="msg-content" v-if="info !== null">
			<view class="mc-item">
				<view class="mci-top">
					<view class="mt-left">
						<image :src="info.terminalImg || 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/user_avatar.png'" mode=""></image>
					</view>
					<view class="mt-right">
						<view class="mtr-top">
							<view class="mtrt-name">{{ info.name || ''}}</view>
						</view>
						<view class="mtr-bottom">
							<text>{{ info.showProvince || ''}}</text>
							<text style="margin-left: 8rpx;">{{ info.showCity || ''}}</text>
						</view>
					</view>
				</view>
				<view class="mci-mid">
					<view class="mm-content">{{ info.content || '' }} </view>
					<view class="mm-video" v-if="info.video && info.video.length" 
          :style="{ width: info.videoWidth ? `${info.videoWidth}rpx`: '446rpx', height: info.videoHeight ? `${info.videoHeight}rpx` : '340rpx' }">
						<video
							:src="info.video"
							:poster="info.coverVideo || ''"
							object-fit="cover"
						></video>
					</view>
					<view class="mm-img" v-if="info.img && info.img.length">
						<view :class="['mmv-list', 'mmv-list-' + info.img.split(',').length]">
							<image
								v-for="(src, vIndex) in info.img.split(',')"
								:key="vIndex"
								:src="src || currentImg"
								mode="widthFix"
								@click.stop="handlePreviewImage(info.img.split(','), vIndex)"
							/>
						</view>
					</view>
					
					<view class="mci-action">
						<view class="ma-time">{{ formatDate(info.createdTime) || '' }}</view>
						<view class="ma-del" @click.stop="handleDelete" v-if="getUserInfo.id == info.userId">
							<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_delete.png" alt="">
						</view>
					</view>
				</view>
		
				<!-- 操作栏 -->
				<view class="mci-btm">
					<view class="mcib-left" @click.stop="handleComFocus">
						<u--input
							placeholder="发表我的看法..."
							border="none"
							readonly
							placeholderStyle="color: rgba(0, 0, 0, 0.45); font-size: 13px;"
						></u--input>
					</view>
					
					<view class="mcib-right">
						<view class="mb-box" @click.stop="handleComFocus">
							<view class="mbb-img">
								<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_xinxi.png" mode=""></image>
							</view>
							<view class="mbb-action">{{ info.commentNum || 0 }}</view>
						</view>
						<view class="mb-box" @click.stop="handleLikes">
							<view class="mbb-img">
								<image :src="`https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/${ info.isLikes ? 'ic_praise' : 'ic_unPraise' }.png`" mode=""></image>
							</view>
							<view class="mbb-action" :style="{ color: info.isLikes ? 'rgba(207, 26, 27, 1)' : 'rgba(0, 0, 0, 0.65)'}">{{ info.likes || 0 }}</view>
						</view>
						<view class="mb-box"  @click.stop="handleShare">
							<view class="mbb-img">
								<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_share.png" mode=""></image>
							</view>
							<view class="mbb-action">{{ info.forward || 0 }}</view>
						</view>
					</view>
				</view>
				

				<u-modal
					:show="modalData.show"
					:content='modalData.content'
					confirmText="确定"
					cancelText="取消"
					confirmColor="#EE0A24"
					:showCancelButton="true"
					:closeOnClickOverlay="true"
					@close="modalData.show = false"
					@confirm="confirm"
					@cancel="modalData.show = false"
				></u-modal>

			</view>
		
			<view class="comment-content">
				<view class="cc-header">
					<view class="cch-left">全部评论 <text>( {{ info.commentNum || 0 }}条 )</text></view>
					<view class="cch-right" @click="handleComSort">
						{{ formDatas.sortType === 2 ? '时间倒序' : '时间正序' }}
						<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_sort.png" mode=""></image>
					</view>
				</view>
				<view class="cc-main">
					<view class="ccm-empty" v-if="!commentTotal">
						<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/pic_zanwuxinxi.png" mode=""></image>
						<text class="ccm-empty-text">暂无卡友回复哦</text>
					</view>
					
					<!-- 评论列表 -->
					<view class="ccm-list" v-else>
						<view class="ccm-l-item" v-for="item in commentList" :key="item.commentId">
							<view class="ccm-li-left">
								<image class="ccm-lil-avatar" :src="item.headImg || currentImg" mode=""></image>
							</view>
							<view class="ccm-li-right">
								<!-- 当前评论-主题 开始 -->
								<view class="ccm-lir-theme">
									<view class="ccm-lir-t-left" @click="replyTheme(item, 'theme')">
										<view class="ccm-lir-tl-name">
											{{ item.name || '' }}
											<text v-if="item.authorFlag">(作者)</text>
										</view>
										<view class="ccm-lir-tl-content">{{ item.content || '' }}</view>
										<view class="ccm-lir-tl-time">
											{{ item.createdTime || '' }}
											<view class="ccm-lir-tlt-place">
												{{ item.province || '' }}
											</view>
										</view>
									</view>
									<view class="ccm-lir-t-right">
										<view class="ccm-lir-tr-likes" @click.stop="likeComment('comment', item)">
											<image
												class="ccm-lir-trl-image"
												:src="`https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/${ item.isLikes ? 'ic_praise' : 'ic_unPraise' }.png`"
												mode="">
											</image>
											<view class="ccm-lir-trl-count" :style="{ color: item.isLikes ? 'rgba(207, 26, 27, 1)' : 'rgba(0, 0, 0, 0.65)'}">
												{{ item.likeNum || 0 }}
											</view>
										</view>
									</view>
								</view>
								<!-- 当前评论-主题 结束 -->
							
								<!-- 回复内容 开始 -->
								<view class="ccm-lir-replyInfo" v-if="item.replyInfo && item.replyInfo.length">
									<template v-if="item.shrink">
										<view class="ccm-lir-r-item" v-for="reply in item.firstReplyInfo" :key="reply.replyId">
											<view class="ccm-li-left">
												<image class="ccm-lil-avatar" :src="reply.headImg || currentImg" mode=""></image>
											</view>
											<view class="ccm-li-right">
												<view class="ccm-lir-theme">
													<view class="ccm-lir-t-left" @click="replyTheme(reply, 'reply')">
														<view class="ccm-lir-tl-name">
															{{ reply.name || '' }}
															<text v-if="reply.authorFlag">(作者)</text>
														</view>
														<!-- 评论 -->
														<view class="ccm-lir-tl-content" v-if="!reply.replyUserShowFlag">{{ reply.content || '' }}</view>
														<!-- 回复 -->
														<view class="ccm-lir-tl-toReply" v-else>
															<text class="ccm-lir-tlt-reply">回复</text>
															<view class="ccm-lir-tlt-toName">
																@{{ reply.toReplyName }}
																:
															 </view>
															<view class="ccm-lir-tlt-toReplyContent"> {{ reply.content || '' }} </view>
														</view>
														<view class="ccm-lir-tl-time">
															{{ reply.createdTime || '' }}
															<view class="ccm-lir-tlt-place">
																{{ reply.province || '' }}
															</view>
														</view>
													</view>
													<view class="ccm-lir-t-right">
														<view class="ccm-lir-tr-likes" @click.stop="likeComment('reply', reply)">
															<image
																class="ccm-lir-trl-image"
																:src="`https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/${ reply.isLikes ? 'ic_praise' : 'ic_unPraise' }.png`"
																mode="">
															</image>
															<view class="ccm-lir-trl-count" :style="{ color: reply.isLikes ? 'rgba(207, 26, 27, 1)' : 'rgba(0, 0, 0, 0.65)'}">
																{{ reply.likeNum || 0 }}
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
										<view class="ccm-lir-shrink" v-if="item.replyInfo.length > 1" @click="replySpread(item.commentId, item.shrink)">
											展开{{ item.replyInfo.length - 1 }}条回复
										</view>
									</template>
									
									<template v-else>
										<view class="ccm-lir-r-item" v-for="reply in item.replyInfo" :key="reply.replyId">
											<view class="ccm-li-left">
												<image class="ccm-lil-avatar" :src="reply.headImg || currentImg" mode=""></image>
											</view>
											<view class="ccm-li-right">
												<view class="ccm-lir-theme">
													<view class="ccm-lir-t-left"  @click="replyTheme(reply, 'reply')">
														<view class="ccm-lir-tl-name">
															{{ reply.name || '' }}
															<text v-if="reply.authorFlag">(作者)</text>
														</view>
														<!-- 评论 -->
														<view class="ccm-lir-tl-content" v-if="!reply.replyUserShowFlag">{{ reply.content || '' }}</view>
														<!-- 回复 -->
														<view class="ccm-lir-tl-toReply" v-else>
															<view class="ccm-lir-tlt-reply">回复</view>
															<view class="ccm-lir-tlt-toName">
																@{{ reply.toReplyName }}
																: 
															</view>
															<view class="ccm-lir-tlt-toReplyContent"> {{ reply.content || '' }} </view>
														</view>
														<view class="ccm-lir-tl-time">
															{{ reply.createdTime || '' }}
															<view class="ccm-lir-tlt-place">
																{{ reply.province || '' }}
															</view>
														</view>
													</view>
													<view class="ccm-lir-t-right">
														<view class="ccm-lir-tr-likes" @click.stop="likeComment('reply', reply)">
															<image
																class="ccm-lir-trl-image"
																:src="`https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/${ reply.isLikes ? 'ic_praise' : 'ic_unPraise' }.png`"
																mode="">
															</image>
															<view class="ccm-lir-trl-count" :style="{ color: reply.isLikes ? 'rgba(207, 26, 27, 1)' : 'rgba(0, 0, 0, 0.65)'}">
																{{ reply.likeNum || 0 }}
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</template>
								</view>
								<!-- 回复内容 结束 -->
							</view>
						</view>
					</view>
					
				</view>
				
				<view class="tabs-loadmore-text" v-if="showLoadMore">{{ loadMoreText }}</view>
			</view>
			
		</view>
		
		<view class="null-content" v-else>
			<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/common/pic_404.png" mode=""></image>
			<view class="null-desc">抱歉，您访问的页面不存在</view>
		</view>
		
		<!-- 分享 -->
		<u-popup
			:show="popupShow"
			:round="20"
			mode="bottom"
			@close="popupClose"
			@open="popupOpen"
			:closeOnClickOverlay="true"
			>
			<view class="popup-content">
				<view class="pc-title">分享到</view>
				<view class="pc-list">
					<view class="pc-item" v-for="item in popupList" :key="item.type" @click.stop="handlePopupClick(item.type)">
						<view class="pci-box" v-if="item.type === 'weChat'">
							<button open-type="share">
								<image class="pci-image" :src="item.url" mode=""></image>
								<view  class="pci-label" >
									{{ item.label }}
								</view>
							</button>
						</view>
						<view class="pci-box" v-else>
							<image class="pci-image" :src="item.url" mode=""></image>
							<view  class="pci-label" >
								{{ item.label }}
							</view>
						</view>
					</view>
				</view>
				<view class="pc-btn" @click.stop="popupShow = false">取消</view>
			</view>
		</u-popup>
				
		<!-- 举报、屏蔽 -->
		<u-action-sheet
			class="action-sheet"
			:round="20"
			:show="operShow"
			:actions="operList"
			:closeOnClickAction="true"
			:closeOnClickOverlay="true"
			cancelText="取消"
			cancelTextClass="cancelTextClass"
			@select="operSelectClick"
			@close="operSelectCancel"
			>
		</u-action-sheet>
		
		<!-- 评论 弹窗 -->
		<u-popup
			:show="popupShowCom"
			:round="20"
			mode="bottom"
			@close="popupCloseCom"
			@open="popupOpenCom"
			:closeOnClickOverlay="true"
		>
			<view class="com-content" >
				<u--textarea
					v-model="comValue"
					@confirm="comConfirm"
					:focus="comFocus"
					maxlength="200"
					border="none"
					autoHeight
					:placeholder="comPlaceholder"
					:showConfirmBar="false"
					:cursorSpacing="getDeviceInfo.system.includes('Android') ? 0 : 56"
				>
				</u--textarea>
				<view class="cc-done-btn" @click.stop="comConfirm">
					发送
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import { mapGetters } from 'vuex'
	import currentImg from '@/static/currentImg.png'
	import getAppLink from '@/mixins/getAppLink.js'
	
	export default {
		components: {
			navBar
		},
		mixins: [getAppLink],
		data() {
			return {
				currentImg,
				info: {},
				modalData: {
					show: false,
					content: '是否删除该卡友圈？'
				},
				popupShow: false,
				popupList: [
					{
						url: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_weChat.png',
						label: '微信好友',
						type: 'weChat'
					},
					{
						url: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_copy.png',
						label: '复制链接',
						type: 'copy'
					},
					{
						url: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_report.png',
						label: '举报',
						type: 'report'
					},
					{
						url: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_shield.png',
						label: '屏蔽',
						type: 'shield'
					}
				],
				shareObj: {},
				operShow: false,	// 举报、屏蔽选择列表
				operType: null,	// 区分举报 还是 屏蔽
				operList: [],	// 选项列表
				reportList: [ // 举报列表
					{
						name: '淫秽色情',
						type: 1
					},
					{
						name: '操作违规',
						type: 2
					},
					{
						name: '言语辱骂',
						type: 3
					},
					{
						name: '营销广告',
						type: 4
					},
				],
				shieldList: [ // 屏蔽列表
					{
						name: '屏蔽@作者昵称',
						type: 'user'
					},
					{
						name: '屏蔽此条卡友圈',
						type: 'one'
					},
				],
				isShow: false,	// 用于onshow判断是否调用接口
				cacheShieldUser: [],	// 屏蔽的用户
				cacheShieldThis: [],	// 屏蔽的多条
				
				// 评论
				formDatas: {
					pageNum: 1,
					pageSize: 10,
					showId: null,
					sortType: 2,
					userId: 0,
				},
				commentTotal: 0,
				commentList: [],
				loadMoreText: "加载中...",
				showLoadMore: false,
				
				// 评论
				comPlaceholder: '发表您的评论',
				popupShowCom: false,
				comFocus: false,
				comValue: '',
				comSource: '', // 评论弹窗-来源
				comTemplateObj: {},
				requestFlag: true,	// 开关控制，避免短时间内请求2次
				textAreaBottom: 0, // 输入框聚焦时底部与键盘的距离， ios - 30
        
        pageSource: ''
			};
		},
		computed: {
			...mapGetters('global', ['getSystemInfo', 'getNowLocation', 'getDeviceInfo']),
			...mapGetters('user', ['getUserInfo']),
			formatDate(){
				return (date) => {
					const time = new Date(date).getTime()
					// 当前时间
					const now = new Date().getTime()
					// 发布日期 大于 当前往前推24小时的 直接显示日期(今天之前的)
					if(time < now - 1000 * 60 * 60 * 24){
						return date.substring(0, date.lastIndexOf(':'))
					}else {
						if(time > now - 1000 * 60){
							return '现在'
						}else if(time > now - 1000 * 60 * 60){
							const min = parseInt((now - time) / 1000 / 60 % 60)
							return min + '分钟前'
						}else if(time > now - 1000 * 60 * 60 * 24){
							const hour = parseInt((now - time) / 1000 / 60 / 60 % 24)
							return hour + '小时前'
						}
					}
				}
			},
			getReplyList(){
				return (shrink, data, id) => {
					if(shrink){
						const record = data.shift()
						return this.commentList.filter(i => i.commentId === id).replyInfo = record
						// return data.shift()
					} else {
						return data
					}
				}
			},
		},
		// 分享给朋友
		onShareAppMessage(res){
			// 用于详情页，操作删除，返回列表页刷新数据
			uni.setStorageSync('circleDetailId_top', this.info.id)
			this.accumulateShare()
			
			if(res.from === 'button'){
				// 0-未屏蔽, 1-已屏蔽
				return {
					title: this.info.content,
					path: this.info.id ? `/circlePack/detail/index?id=${this.info.id}&shieldUser=0&shieldThis=0` : `/pages/circle/index`,
					imageUrl: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/share_cover.png'
				}
			}
		},
		onLoad(query){
			// 0-未屏蔽, 1-已屏蔽
			// const { id, shieldUser, shieldThis } = query
			// this.shareObj = {
			// 	shieldUser: shieldUser - 0,
			// 	shieldThis: shieldThis - 0
			// }
			// this.getDetailInfo(id)
		},
		onPageScroll(res){
			// console.log('scroll', res);
		},
		onShow(){
			const pages = getCurrentPages().at(-1).$page.fullPath;
			const queryString = pages.split('?')[1]
			const queryList = queryString.split('&')
			if(queryList && queryList.length){
				queryList.forEach(i => {
					if(i.includes('id=')){
						const id = i.split('=')[1]
						this.getDetailInfo(id)
					}else if(i.includes('shieldUser=')){
						this.shareObj.shieldUser = i.split('=')[1] - 0 || 0
					}else if(i.includes('shieldThis=')){
						this.shareObj.shieldThis = i.split('=')[1] - 0 || 0
					}else if(i.includes('source=')){
            this.pageSource = 'video'
					}
				})
			}
			
			// 读取在列表页屏蔽的数据
			if(uni.getStorageSync('circle_cacheShieldUser')){
				this.cacheShieldUser = JSON.parse(uni.getStorageSync('circle_cacheShieldUser')) || []
			}
			if(uni.getStorageSync('circle_cacheShieldThis')){
				this.cacheShieldThis = JSON.parse(uni.getStorageSync('circle_cacheShieldThis')) || []
			}
		},
		methods: {
			// 返回列表并刷新
			async returnUplate(){
				const checkStatus = await this.existShow(this.info.id)
				if(!checkStatus){
					uni.showToast({
						title: '操作失败，该信息已被删除或隐藏',
						icon: 'none'
					})
					
					// 用于详情页，操作删除，返回列表页刷新数据
					uni.setStorageSync('circleDetailId_top', this.info.id)
					setTimeout(() => {
            if(this.pageSource === 'video') {
              uni.reLaunch({
              	url: `/videoPack/videoList/index`
              })
            } else {
              uni.navigateBack()
            }
					}, 1000)
					
					return false
				}else {
					return true
				}

			},
			// 校验卡圈状态是否可被操作
			async existShow(id){
				return new Promise((resolve, reject) => {
					this.$request({
						method: 'GET',
						url: '/terminal-serve-center/app/cars/existShow',
						data: {
							id
						}
					}).then(res => {
						resolve(res.datas.existFlag)
					}).catch(res => {
						reject(res.datas.existFlag)
					})
				})
			},
			backTop(){
			  // 回到顶部
			  uni.createSelectorQuery().select(".container")
					.boundingClientRect(data => { //目标节点
						uni.createSelectorQuery().select(".comment-content")
								.boundingClientRect((res) => { //最外层盒子节点
									uni.pageScrollTo({
										duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
										scrollTop: res.top > 450 ? res.top + 120 : res.top,
									})
								}).exec()
					}).exec();
			},
			async replyTheme(item, type){
				const checkStatus = await this.returnUplate()
				if(!checkStatus){
					return false
				}
				
				this.comSource = type
				this.comTemplateObj = item
				this.comPlaceholder = `回复 @${item.name}:`
				this.popupShowCom = true
			},
			// 1-车主端时间正序，2-车主端时间倒序，3-门店端排序
			async handleComSort(){
				const checkStatus = await this.returnUplate()
				if(!checkStatus){
					return false
				}
				
				if(!this.commentList.length){
					return false
				}
				this.formDatas.pageNum = 1
				this.formDatas.sortType = this.formDatas.sortType === 2 ? 1 : 2
				this.commentList = []
				this.getCommentList()
			},
			async likeComment(type, item){
				const checkStatus = await this.returnUplate()
				if(!checkStatus){
					return false
				}
				
				// type: comment - 评论， reply - 回复
				const res = await this.$request({
					method: 'POST',
				  url: '/terminal-serve-center/merchantShowComment/likes',
					data: {
						userId: this.getUserInfo.id,
						itemId: type === 'comment' ? item.commentId : item.replyId,
						isLikes: item.isLikes ? 0 : 1
					}
				})
				item.likeNum = item.isLikes ? item.likeNum - 1 : item.likeNum + 1
				item.isLikes = item.isLikes ? 0 : 1
			},
			async comSend(){
				// this.comSource: circle - 评论卡友圈， theme - 回复顶级评论， reply - 回复用户
				const url = this.comSource === 'circle' ? '/terminal-serve-center/merchantShowComment/comment' : '/terminal-serve-center/merchantShowComment/reply'
				const data = {
					userId: this.getUserInfo.id,
					showId: this.info.id,
					content: this.comValue,
					province: this.getNowLocation.province || '',
					city: this.getNowLocation.cityName || ''
				}
				if(this.comSource === 'theme'){
					data.toCommentId = this.comTemplateObj.commentId
					data.toUserId = this.comTemplateObj.userId
				}
				if(this.comSource === 'reply'){
					data.toCommentId = this.comTemplateObj.commentId	// 	顶级评论id
					data.toReplyId = this.comTemplateObj.replyId	// 回复id
					data.toUserId = this.comTemplateObj.userId	// 回复用户id
				}
				await this.$request({
					methods: 'POST',
					url,
					data
				}).then(res => {
					uni.showToast({
						title: this.comSource === 'circle' ? '评论成功' : '回复成功',
						icon: 'none'
					})
					
					this.info.commentNum += 1
					this.popupCloseCom()
					this.backTop()
					this.commentList = []
					this.formDatas.pageNum = 1
					this.getCommentList()
					// this.getDetailInfo(this.info.id)
					
					// 用于详情页，操作屏蔽、点赞，返回列表页刷新数据
					uni.setStorageSync('circleDetailId', this.info.id)
				}).catch(res => {
					uni.showToast({
						title: res.respMsg ? res.respMsg.split(':')[1] : '评论失败',
						icon: 'none'
					})
				})
			},
			comConfirm(){
				if(!this.comValue){
					return 
				}else {
					this.comSend()
				}
			},
			popupOpenCom(){
				this.comFocus = true
			},
			popupCloseCom(){
				this.popupShowCom = false
				this.comValue = ''
				this.comPlaceholder = '发表您的评论'
				this.shareObj = {}
				this.comFocus = false
				this.comSource = ''
				this.comTemplateObj = {}
			},
			async handleComFocus(){
				const checkStatus = await this.returnUplate()
				if(checkStatus){
					this.$forceUpdate()
					this.popupShowCom = true
					this.comSource = 'circle'
				}
				// const checkStatus = await this.existShow(this.info.id)
				// if(!checkStatus){
				// 	uni.showToast({
				// 		title: '操作失败，该信息已被删除或隐藏',
				// 		icon: 'none'
				// 	})
					
				// 	this.returnUplate()
				// 	return false
				// }
				// this.$forceUpdate()
				// this.popupShowCom = true
				// this.comSource = 'circle'
			},
			replySpread(commentId, shrink){
				this.commentList.find(i => i.commentId === commentId).shrink = false
				this.$forceUpdate()
			},
			// 获取评论列表
			async getCommentList(){
				// requestFlag 开关控制，避免从详情页返回到列表页，短时间内请求2次
				if(!this.requestFlag){
					return false
				}
				this.requestFlag = false
								
				uni.showLoading({
					title: '加载中...'
				})
				const res = await this.$request({
					method: 'POST',
				  url: '/terminal-serve-center/merchantShowComment/list',
					data: {
						...this.formDatas,
						showId: this.info.id,
						userId: this.getUserInfo.id,
					},
				}).catch(res => {
					uni.hideLoading()
				})
				const data = res.datas.data
				data.forEach(i => {
					if(i.replyInfo && i.replyInfo.length > 1){
						// 有回复内容 且 大于一条
						i.shrink = true
						i.firstReplyInfo = i.replyInfo.filter((i, index) => index === 0)
					} else {
						i.shrink = false
					}
				})
				this.commentList = this.unique(this.commentList.concat(data)) 
				this.commentTotal = res.datas.count || 0
				uni.hideLoading()
				
				setTimeout(() => {
					this.requestFlag = true
				}, 500)
			},
			// 通过id，过滤重复数据
			unique(arr) {
				const res = new Map()
				return arr.filter(arr => !res.has(arr.commentId) && res.set(arr.commentId, 1))
			},
			
			// 累计分享次数
			accumulateShare(){
				this.$request({
					method: 'POST',
				  url: '/terminal-serve-center/app/cars/storeShowForward',
					data: {
						id: this.info.id
					}
				})
				this.info.forward = this.info.forward + 1
			},
			operSelectCancel(){
				this.operShow = false
			},
			operSelectClick(data){
				this.operShow = false
				if(this.operType === 'report'){	// 举报
					this.handleReport(data.type)
				}else {	// 屏蔽
					// 0-未屏蔽, 1-已屏蔽
					if(data.type === 'user'){	// 屏蔽用户
						this.handleShield(this.shareObj.shieldUser === 0 ? 1 : 3, data.type)
					}else {		// 屏蔽此条
						this.handleShield(this.shareObj.shieldThis === 0 ? 2 : 4, data.type)
					}
				}
			},
			// 举报函数
			async handleReport(type){
				await this.$request({
					methods: 'POST',
					url: '/terminal-serve-center/app/cars/reportShow',
					data: {
						id: this.info.id,
						type
					}
				}).then(res => {
					uni.showToast({
						title: '举报成功',
						icon: 'none'
					})
				}).catch(res => {
					uni.showToast({
						title: '您已经举报过了',
						icon: 'none'
					})
				})
			},
			// 屏蔽函数
			async handleShield(type, dataType){
				// 	屏蔽类型(1-屏蔽用户,2-屏蔽卡友圈,3-取消屏蔽用户,4-取消屏蔽卡友圈)
				await this.$request({
					method: 'POST',
				  url: '/terminal-serve-center/app/cars/blockShow',
					data: {
						userId: this.getUserInfo.id,
						id: this.info.id,
						showUserId: this.info.userId,
						type
					}
				}).then(res => {
					if(dataType === 'user'){	// 屏蔽用户
						this.shareObj.shieldUser = this.shareObj.shieldUser === 0 ? 1 : 0
						// 屏蔽的用户id，
						if(!this.cacheShieldUser.includes(this.info.id)){
							this.cacheShieldUser.push(this.info.id)
						}
						uni.setStorageSync('circle_cacheShieldUser', JSON.stringify(this.cacheShieldUser))
					}else {		// 屏蔽此条
						this.shareObj.shieldThis = this.shareObj.shieldThis === 0 ? 1 : 0
						// 屏蔽的多条id，
						if(!this.cacheShieldThis.includes(this.info.id)){
							this.cacheShieldThis.push(this.info.id)
						}
						uni.setStorageSync('circle_cacheShieldThis', JSON.stringify(this.cacheShieldThis))
					}
										
					uni.showToast({
						title: (type === 1 || type === 2) ? '屏蔽成功' : '取消屏蔽成功',
						icon: 'none'
					})
					
					// 取消屏蔽，后在本地缓存中过滤掉
					if(type === 3){
						this.cacheShieldUser = this.cacheShieldUser.filter(i => i !== this.info.id)
						uni.setStorageSync('circle_cacheShieldUser', JSON.stringify(this.cacheShieldUser))
					}else if(type === 4) {
						this.cacheShieldThis = this.cacheShieldThis.filter(i => i !== this.info.id)
						uni.setStorageSync('circle_cacheShieldThis', JSON.stringify(this.cacheShieldThis))
					}
					
					// 用于详情页，操作屏蔽、点赞，返回列表页刷新数据
					uni.setStorageSync('circleDetailId', this.info.id)
					
				}).catch(res => {
					uni.showToast({
						title: res.respMsg,
						icon: 'none'
					})
				})
			},
			async handlePopupClick(type){
				// 屏蔽操作不做校验，其它操作需要校验卡友圈的状态才能继续
				
				if(type !== 'shield'){
					const checkStatus = await this.returnUplate()
					if(!checkStatus){
						return false
					}
				}
				
				if(type === 'weChat'){	// 微信-分享
				// 通过设置 button open-type="share", 触发onShareAppMessage，这边不需要写逻辑
				}else if(type === 'copy'){	// 复制
						let params = {
							path: '/circlePack/detail/index',
							query: `id=${this.info.id}&shieldUser=${this.shareObj.shieldUser}&shieldThis=${this.shareObj.shieldThis}`, // 短链的入参
						}
						const url = await this.getShareLink(params)
						console.log('返回的url：', url);
						if(url && url.length){
							uni.setClipboardData({
								data: url, // 复制的内容 
								success: res => {
									uni.showToast({
										title: '复制成功',
										duration: 1000
									})
								}
							});
							this.accumulateShare()
						}else {
							uni.showToast({
								title: '复制失败',
								icon: 'none',
							})
						}
				}else if(type === 'report'){	// 举报
					this.operType = 'report'
					this.operList = this.reportList
					this.operShow = true
				}else{	// 屏蔽
					this.operType = 'shield'
					 // 0-未屏蔽, 1-已屏蔽
					this.shieldList[0].name = this.shareObj.shieldUser === 0 ? `屏蔽@${this.info.createdUser}` : `取消屏蔽@${this.info.createdUser}`
					this.shieldList[1].name = this.shareObj.shieldThis === 0 ? `屏蔽此条卡友圈` : '取消屏蔽此条卡友圈'
					this.operList = this.shieldList
					this.operShow = true
				}
				this.popupShow = false
			},
			// 分享 等 操作
			handleShare(){
				this.popupShow = true
			},
			popupClose(){
				this.popupShow = false
			},
			popupOpen(){},
			async confirm(){
				const res = await this.$request({
					method: 'POST',
				  url: '/terminal-serve-center/app/cars/delStoreShow',
					data: {
						id: this.info.id,
						userId: this.getUserInfo.id,
					}
				}).catch(res => {
					uni.showToast({
						title: res.respMsg,
						icon: 'none'
					})
				})
				this.modalData.show = false
				
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				})

				
				this.returnUplate()
			},
			async handleDelete(){
				const checkStatus = await this.returnUplate()
				if(!checkStatus){
					return false
				}
				
				this.modalData.show = true
			},
			async handleLikes(){
				const res = await this.$request({
					method: 'POST',
				  url: '/terminal-serve-center/app/cars/storeShowLikes',
					data: {
						userId: this.getUserInfo.id,
						id: this.info.id,
						isLikes: this.info.isLikes ? 0 : 1
					}
				}).then(res => {
					this.info.likes =  this.info.isLikes ? this.info.likes - 1 : this.info.likes + 1
					this.info.isLikes = this.info.isLikes ? 0 : 1
					
					// 用于详情页，操作屏蔽、点赞，返回列表页刷新数据
					uni.setStorageSync('circleDetailId', this.info.id)
				}).catch(res => {
					this.returnUplate()
				})
			},
			// 图片预览
			handlePreviewImage(urls, current){
				uni.previewImage({
					current,
					urls
				})
			},
			async getDetailInfo(id){
				uni.showLoading({
					title: '加载中...'
				})
				const res = await this.$request({
					method: 'POST',
				  url: '/terminal-serve-center/app/cars/getStoreShowDetail',
					data: {
						id,
						isAPP: 1,
						userId: this.getUserInfo.id,
					},
				}).catch(res => {
					uni.showToast({
						title: res.respMsg,
						icon: 'none'
					})
					if(res.respCode === 401){
						uni.redirectTo({
						  url: '/authPack/login/wxLogin'
						  // url: '/authPack/login/phoneLogin'
						})
					}
					uni.hideLoading()
				})	
				// 是否隐藏
				if (res.datas&&res.datas.isVisible === 1){
					uni.switchTab({
						url: '/pages/circle/index'
					})
				}
				this.info = res.datas
				// this.info = Object.assign(res.datas, this.shareObj)
				if(this.info && this.info.id){
					this.getCommentList()
				}
				uni.hideLoading()
			},
		},
		
		// 需要上滑请求则放出来
		onReachBottom() {
			if(!this.requestFlag) return false
			if (this.commentList.length >= this.commentTotal) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}
			this.showLoadMore = true;
			this.formDatas.pageNum += 1
			this.getCommentList()
		},
		onPullDownRefresh() {
			this.commentList = []
			this.formDatas.pageNum = 1
			this.getCommentList();
		},
	}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	.msg-content {
		padding-bottom: 130rpx;
		box-sizing: border-box;
		.mc-item {
			margin-bottom: 20rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			.mci-top {
				display: flex;
				width: 100%;
				padding: 32rpx;
				box-sizing: border-box;
				.mt-left {
					margin-right: 16rpx;
					image {
						width: 98rpx;
						height: 98rpx;
						border-radius: 50%;
					}
			}
				.mt-right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 12rpx 0;
					.mtr-top {
						display: flex;
						justify-content: space-between;
						.mtrt-name {
							font-size: 14px;
							color: rgba(0, 0, 0, 0.85);
						}
					}
					.mtr-bottom {
						font-size: 13px;
						color: rgba(0, 0, 0, 0.45);
					}
				}
			}
			
			.mci-mid {
				padding: 0 32rpx;
				box-sizing: border-box;
				.mm-content {
					white-space: pre-wrap;
					margin-bottom: 24rpx;
					color: rgba(0, 0, 0, 0.85);
					font-size: 14px;
				}
				// 视频
				.mm-video {
					margin: 26rpx 0;
					video {
						width: 100%;
						height: 100%;
						// height: 400rpx;
					}
				}
				// 图片
				.mm-img {
					.mmv-list {
						image {
							width: 100%;
							height: 400rpx;
						}
					}
				}
				
				// 删除
				.mci-action {
					display: flex;
					align-items: center;
					padding-bottom: 32rpx;
					margin-top: 28rpx;
					.ma-time {
						font-size: 13px;
						color: rgba(0, 0, 0, 0.45);
					}
					.ma-del {
						margin-left: 24rpx;
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
			
			.mci-btm {
				width: 100%;
				position: fixed;
				left: 0;
				bottom: 0;
				z-index: 9;
				background-color: #ffffff;
				border-top: 1px solid rgba(0, 0, 0, 0.10);
				padding: 20rpx 32rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.mcib-left {
					padding: 16rpx 30rpx;
					border-radius: 80rpx;
					background-color: rgba(245, 245, 246, 1);
				}
				.mcib-right {
					width: 100%;
					max-width: 36vw;
					display: flex;
					justify-content: space-around;
					.mb-box {
						display: flex;
						align-items: center;
						flex-direction: column;
						.mbb-img {
							image {
								width: 44rpx;
								height: 44rpx;
							}
						}
						.mbb-action {
							color: rgba(0, 0, 0, 0.65);
							font-size: 14px;
						}
					}
				}
			}

		}
	
		// 评论 
		.comment-content {
			background-color: #ffffff;
			.cc-header {
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.85);
				border-bottom: 1px solid rgba(0, 0, 0, 0.08);
				padding: 32rpx;
				box-sizing: border-box;
				.cch-left {
					color: rgba(0, 0, 0, 0.85);
					text-shadow: 0 0 0.1px currentColor;
					text {
						margin-left: 10rpx;
					}
				}
				.cch-right {
					display: flex;
					align-items: center;
					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
			
			.cc-main {
				.ccm-empty {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 124rpx 0;
					image {
						width: 244rpx;
						height: 200rpx;
					}
					.ccm-empty-text {
						color: rgba(0, 0, 0, 0.45);
						font-size: 14px;
						margin-top: 14rpx;
					}
				}
				
				// 评论列表
				.ccm-list {
					padding: 22rpx 32rpx;
					box-sizing: border-box;
					.ccm-l-item {
						display: flex;
						justify-content: space-between;
						overflow: hidden auto;
						word-break: break-all;
						&:not(:nth-last-child(1)){
							margin-bottom: 22rpx;
						}
						.ccm-li-left {
							.ccm-lil-avatar {
								width: 98rpx;
								height: 98rpx;
								border-radius: 50%;
								overflow: hidden;
							}
						}
						.ccm-li-right {
							margin-left: 12rpx;
							width: 100%;
							padding-bottom: 22rpx;
							border-bottom: 1px solid #F6F6F7;
							.ccm-lir-theme {
								padding-top: 16rpx;
								display: flex;
								justify-content: space-between;
								.ccm-lir-t-left {
									font-size: 14px;
									width: 100%;
									// width: calc( 100% - 182rpx );
									.ccm-lir-tl-name {
										color: rgba(0, 0, 0, 0.65);
									}
									.ccm-lir-tl-content {
										color: rgba(0, 0, 0, 0.85);
										line-height: 36rpx;
										margin: 16rpx 0 12rpx;
									}
									.ccm-lir-tl-time {
										font-size: 12px;
										color: rgba(0, 0, 0, 0.45);
										display: flex;
										.ccm-lir-tlt-place	{
											margin-left: 12rpx;
										}
									}
								}
								
								.ccm-lir-t-right {
									display: flex;
									justify-content: flex-end;
									min-width: 80rpx;
									.ccm-lir-tr-likes {
										display: flex;
										flex-direction: column;
										align-items: center;
										height: fit-content;
										min-height: 80rpx;
										.ccm-lir-trl-image {
											width: 40rpx;
											height: 40rpx;
										}
										.ccm-lir-trl-count {
											font-size: 12px;
											margin-top: 2rpx;
											color: rgba(0, 0, 0, 0.65);
										}
									}
								}
							}
						
							// 回复
							.ccm-lir-replyInfo {
								.ccm-lir-r-item {
									display: flex;
									margin-top: 24rpx;
									.ccm-li-left {
										.ccm-lil-avatar {
											width: 36rpx;
											height: 36rpx;
										}
									}
									.ccm-li-right {
										border-bottom: none;
										padding-bottom: 0;
										.ccm-lir-theme {
											padding-top: 0rpx;
											.ccm-lir-t-left {
												.ccm-lir-tl-toReply {
													display: flex;
													align-items: center;
													flex-wrap: wrap;
													margin-top: 10rpx;
													color: rgba(0, 0, 0, 0.85);
													.ccm-lir-tlt-reply {
													}
													.ccm-lir-tlt-toName {
														margin: 0 10rpx;
														color: rgba(0, 0, 0, 0.65);
													}
												}
											}
										}
										
									}
								}
							
								// 展开按钮
								.ccm-lir-shrink {
									color: rgba(207, 26, 27, 1);
									font-size: 14px;
									margin-top: 28rpx;
									margin-left: 48rpx;
								}
							}
						}
					}
				}
				
			}
			
			// 加载中、
			.tabs-loadmore-text {
				text-align: center;
				padding: 10px;
			}
		}
	}
	
	
	// action-sheet
	.action-sheet {
		/deep/ .u-reset-button .u-action-sheet__item-wrap__item .u-action-sheet__item-wrap__item__name {
			color: rgba(0, 0, 0, 0.85);
		}
		/deep/ .u-gap {
			height: 20rpx !important;
			background-color: #F6F6F7 !important;
		}
		/deep/ .cancelTextClass {
			padding: 30rpx 16rpx 68rpx;
			background-color: #ffffff;
		}
		/deep/ .u-action-sheet__cancel-text {
			padding: 26rpx 0;
			background-color: rgba(207, 26, 27, 1);
			color: #ffffff;
			border-radius: 8rpx;
		}
	}

	// 分享
	.popup-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F7F8FA;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		.pc-title {
			width: 100%;
			text-align: center;
			padding: 40rpx 0;
			font-size: 14px;
			color: #323233;
			background-color: #ffffff;
		}
		.pc-list {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 48rpx;
			background-color: #ffffff;
			.pc-item {
				padding-bottom: 32rpx;
				.pci-box {
					display: flex;
					flex-direction: column;
					align-items: center;
					button {
						padding: 0;
						border: none;
						background-color: transparent;
						box-shadow: none;
						font-size: 12px;
						color: #646566;
						line-height: 16px;
						&::after {
							border: none;
							height: auto;
						}
					}
				}
				.pci-image {
					width: 96rpx;
					height: 96rpx;
					vertical-align: bottom;
				}
				.pci-label {
					margin-top: 16rpx;
					font-size: 12px;
					color: #646566;
				}
			}
		}
		.pc-btn {
			margin-top: 16rpx;
			width: 100%;
			text-align: center;
			padding: 26rpx 0;
			font-size: 16px;
			color: #646566;
			background-color: #ffffff;
		}

	}

	// 404
	.null-content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 200rpx;
		image {
			width: 100%;
		}
		.null-desc {
			font-size: 14px;
			color: #9B9B9B;
			margin-top: 40rpx;
		}
	}

	// 评论
	.com-content {
		width: 100%;
		padding: 24rpx 32rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background-color: rgba(245, 245, 246, 1);
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		align-items: flex-end;
		/deep/ .u-textarea {
			border-radius: 38rpx;
			.input-placeholder, 
			.u-textarea__field {
				font-size: 13px !important;
			}
			.input-placeholder {
				color: rgba(0, 0, 0, 0.45) !important;
			}
		}
		.cc-done-btn {
			margin-left: 20rpx;
			width: 180rpx;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 8rpx;
			font-size: 14px;
			color: #ffffff;
			background-color: #CF1A1B;
		}
	}

}
</style>
